<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link href="../../css/font-awesome.css" rel="stylesheet">
<link href="../../css/koala_datagrid.css" rel="stylesheet">
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../js/underscore.js" type="text/javascript"></script>
<script src="../../js/jquery_ui/jquery-ui.js" type="text/javascript"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript" ></script>
<script src="../../js/data.js" type="text/javascript" ></script>
<script src="../../js/koala_datagrid.js" type="text/javascript" ></script>
<style type="text/css">
.bs-example {
    background-color: #ffffff;
    border-color: #E5E5E5 #EEEEEE #EEEEEE;
    border-style: solid;
    border-width: 1px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05) inset;
    margin: 0 -15px -1px;
    padding: 45px 100px 15px 100px;
    position: relative;
}
</style>
<script type="text/javascript">
columns= [
  		{
  			property: 'toponymName',
  			label: 'Name',
  			sortable: true
  		},
  		{
  			property: 'countrycode',
  			label: 'Country',
  			sortable: true
  		},
  		{
  			property: 'population',
  			label: 'Population',
  			sortable: false
  		},
  		{
  			property: 'fcodeName',
  			label: 'Type',
  			sortable: false
  		}
  	];
  	
$(function(){
	$('#MyGrid').datagrid({
		columns:columns,
		datas:datas,
		useCheckBox:false,
		draggable:false
	});
})

</script>
</head>
<body>
<div class="bs-example">
	<table class="table table-hover datagrid" id="MyGrid">						
		<thead>
			<tr>
				<th colspan="4">
					<span class="datagrid-header-title">简单数据表格</span>
	
					<div class="datagrid-header-left">
					   <div style="width:180px;" id="MySearch" class="input-group input-append search datagrid-search">
					       <input type="text" placeholder="Search" class="input-medium form-control">
					       <div class="input-group-btn">
					        <button class="btn btn-default" type="button"><i class="icon-search"></i></button>
					        </div>
					     
					    </div>
			
					</div>
					<div class="datagrid-header-right">
							<div class="btn-group select filter">
					          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					          		<span class="dropdown-label">All</span>
					          		<span class="caret"></span>
					          </button>
					          <ul class="dropdown-menu pull-right">
					          	<li data-value="all"><a href="#">All</a></li>
								<li data-value="&lt;=10000000"><a href="#">Population &lt;= 10000000</a></li>
								<li data-value="&gt;=12000000"><a href="#">Population &gt;= 12000000</a></li>
					          </ul>
					        </div>
					</div>
				</th>
			</tr>
<!-- 			<tr> -->
<!-- 				<th class="sortable" data-property="toponymName">Name</th> -->
<!-- 				<th class="sortable" data-property="countrycode">Country</th> -->
<!-- 				<th class="sortable" data-property="population">Population</th> -->
<!-- 				<th class="sortable" data-property="fcodeName">Type</th> -->
<!-- 			</tr> -->
		</thead>
<!-- 		<tbody> -->
<!-- 			<tr><td>Mexico City</td><td>MX</td><td>12294193</td><td>capital of a political entity</td></tr> -->
<!-- 			<tr><td>Manila</td><td>PH</td><td>10444527</td><td>capital of a political entity</td></tr> -->
<!-- 			<tr><td>Dhaka</td><td>BD</td><td>10356500</td><td>capital of a political entity</td></tr> -->
<!-- 			<tr><td>Seoul</td><td>KR</td><td>10349312</td><td>capital of a political entity</td></tr> -->
<!-- 			<tr><td>Jakarta</td><td>ID</td><td>8540121</td><td>capital of a political entity</td></tr> -->
<!-- 		</tbody> -->
		<tfoot>
			<tr>
				<th colspan="4">
					<div style="visibility: visible;" class="datagrid-footer-left">
					<div class="grid-controls">
						<span>
							<span class="grid-start">1</span> -
							<span class="grid-end">5</span> of
							<span class="grid-count">146 items</span>
						</span>
						<div data-resize="auto" class="select grid-pagesize">
							<button class="btn dropdown-toggle btn-default" data-toggle="dropdown">
								<span class="dropdown-label">5</span>
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li data-value="5"><a href="#">5</a></li>
								<li data-value="10"><a href="#">10</a></li>
								<li data-value="20"><a href="#">20</a></li>
								<li data-value="50"><a href="#">50</a></li>
								<li data-value="100"><a href="#">100</a></li>
							</ul>
						</div>
						<span>Per Page</span>
					</div>
					</div>
					<div style="visibility: visible;" class="datagrid-footer-right">
							<div class="grid-pager">
								<div style="float:left;">
									<button class="btn btn-default grid-prevpage" data-toggle="dropdown" type="button" disabled="disabled"><i class="icon-chevron-left"></i></button>
									<span>Pages</span> 	
								</div>
								<div style="width:80px;padding-left:0px; padding-right:0px;" class="col-lg-6">
								    <div class="input-group combobox">
								      <input type="text" value="1" class="form-control">
								      <div class="input-group-btn">
								       	<input type="hidden" class="dropdown-label" value="1">
								        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
								        	<span class="caret"></span>
								        </button>
								        <ul class="dropdown-menu pull-right" style="overflow-x: hidden; overflow-y: auto; height: 120px;"><li><a>1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li><li><a>5</a></li><li><a>6</a></li><li><a>7</a></li><li><a>8</a></li><li><a>9</a></li><li><a>10</a></li><li><a>11</a></li><li><a>12</a></li><li><a>13</a></li><li><a>14</a></li><li><a>15</a></li><li><a>16</a></li><li><a>17</a></li><li><a>18</a></li><li><a>19</a></li><li><a>20</a></li><li><a>21</a></li><li><a>22</a></li><li><a>23</a></li><li><a>24</a></li><li><a>25</a></li><li><a>26</a></li><li><a>27</a></li><li><a>28</a></li><li><a>29</a></li><li><a>30</a></li></ul>
								      </div>
								    </div>
								  </div>
								  <div style="float:right;">													
								  	<span>of <span class="grid-pages">30</span></span>
								  	<button class="btn btn-default grid-nextpage" type="button"><i class="icon-chevron-right"></i></button>
								  </div>
							</div>
					</div>
				</th>
			</tr>
		</tfoot>
	</table>
</div>
</body>
</html>